<template>
	<view class="bigBox">
		<u-toast ref="uToast"></u-toast>
		<u-navbar @rightClick="rightClick" :autoBack="false" bgColor='#000' height='60'>
			<view class="u-nav-slot left" slot='left'>
				<u-icon name="phone-fill" size="50rpx" color='#fff'></u-icon>
				<text>本机号码一键登录</text>
			</view>
			<view class="u-nav-slot right" slot='right'>
				<text>账号密码登录</text>
				<u-icon name="arrow-right-double" size="28rpx" color='#aaa'></u-icon>
			</view>
		</u-navbar>
		<view class="phone">
			188****1001
		</view>
		<view class="bottom">
			<view class="loginbtn" @click="goHome">
				本机号码一键登录
			</view>
			<view class="ys">
				<u-checkbox-group>
					<u-checkbox v-model="checked" active-color="#5677fc" @change='checkedChange'></u-checkbox>
					注册登录即为同意<text class="ysText" @click="jump('/pages/detail/articleDetail?id=','289')">《用户协议》</text>
					<text class="ysText" @click="jump('/pages/detail/YinSiDetail?id=','6')">《隐私政策》</text>
				</u-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false
			}
		},
		onLoad() {
			// this.getPhoneNumber()
		},
		methods: {
			jump(path, params) {
				uni.navigateTo({
					url: path + params
				})
			},
			checkedChange(value) {
				this.checked = value
				// console.log(value)
			},
			goHome() {
				uni.login({
					provider: 'univerify',
					success: function(loginRes) {
						console.log(loginRes);
					}
				});
				return
				if (this.checked) {
					this.$refs.uToast.show({
						type: 'success',
						icon: true,
						message: "登录成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
						duration: 1000,
						complete: () => {
							uni.reLaunch({
								url: '/pages/home/home/home'
							})
						}
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						icon: false,
						message: "请勾选协议",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					})
				}

			},
			getPhoneNumber() {
				plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, res => {
					res.find(
						['displayName', 'phoneNumbers'],
						(contacts) => {
							let lis = contacts
							console.log(lis)
						}
					)

				})

				// this.iv = e.detail.iv
				// this.encryptedData = e.detail.encryptedData
			},
			rightClick() {
				uni.navigateTo({
					url: '/pages/index/login'
				})
				console.log(1)
			}
		}
	}
</script>

<style>
	.bigBox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 80vh;
	}

	.left {
		display: flex;
		align-items: center;
		font-size: 48rpx;
		color: #fff;
	}

	.right {
		font-size: 28rpx;
		color: #aaa;
		display: flex;
	}

	.bottom {
		position: absolute;
		bottom: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.ys {
		margin-top: 100rpx;
		display: flex;
		color: #BEC7D1;
	}

	.ysText {
		color: #6cddd2;
	}

	.phone {
		color: rgba(16, 16, 16, 100);
		font-size: 72rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		letter-spacing: 10rpx;
	}

	.loginbtn {
		width: 670rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 8rpx;
		background-color: #1684FC;
		color: rgba(255, 255, 255, 100);
		font-size: 36rpx;
		text-align: center;
		font-family: Arial;
		border: 2rpx solid rgba(33, 51, 255, 100);
	}
</style>
